CSSの基本(15)−外部余白を指定する
前回の内部余白とは逆に、枠線の外側に余白を指定することも可能です。そこで、今回は外部余白を指定するmarginプロパティの使い方を解説します。画像などの間隔を調整する場合などに活用するとよいでしょう。

→ 外部余白を指定する
 
内部余白を指定する場合は、paddingプロパティを利用し、その値に単位付きの数値を記述します。たとえば、以下のようにpaddingプロパティを記述すると、枠線の内側に20ピクセルの余白を設けることが可能となります。
<STYLE type="text/css">

IMG{
border:5px #009900 solid;
margin:25px;
}

</STYLE>

<BODY>

<H1>外部余白の指定</H1>
<IMG src="photo01.jpg">
<IMG src="photo02.jpg"><BR>
<IMG src="photo03.jpg">
<IMG src="photo04.jpg">
  :
サンプルページ


→ 外部余白を個別に指定する
 
上下左右の外部余白を個別に指定することも可能です。この場合は、margin-top(上)、margin-bottom(下)、margin-left(左)、margin-right(右)といったプロパティを利用します。これを応用すると、以下のサンプルのようなレイアウトも作成できます。画像の横幅はそれぞれ200ピクセルですので、各画像の左側の外部余白を200ピクセルずつ増やしていくことにより、画像をナナメに配置しています。上下の外部余白には、それぞれ0ピクセルを指定しています。
<IMG src="photo01.jpg" style="margin-top:0px; margin-bottom:0px">
<BR>
<IMG src="photo02.jpg" style="margin-top:0px; margin-bottom:0px; margin-left:200px">
<BR>
<IMG src="photo03.jpg" style="margin-top:0px; margin-bottom:0px; margin-left:400px">
<BR>
<IMG src="photo04.jpg" style="margin-top:0px; margin-bottom:0px; margin-left:600px">
サンプルページ


yVoC[UNLIMIT1~] ECir|C Yahoo yV LINEf[^[z500~`I


z[y[W NWbgJ[h COiq O~yz COsI COze